<template>
    <div class="loginBox" v-if="isShowLogin">
      <img class="loginImgBg" src="~SYSTEM_IMAGE/images/login_bg.jpg" />
      <el-form ref="form" :model="ruleForm" label-width="80px">
        <div class="loginContent">
          <img class="loginLogo" src="~SYSTEM_IMAGE/test/logo.jpg" />
          <div class="loginTitleBox"><span style="font-size:30px;font-weight:bold;color:#000">EasyD</span> 后台管理系统&nbsp;&nbsp;</div>
          
          <div class="formItemBox">
            <el-input
              placeholder="请输入帐号"
              suffix-icon="fa fa-user-circle fa-lg"
              v-model="ruleForm.username">
            </el-input>
          </div>
          <div class="formItemBox">
            <el-input
              placeholder="请输入密码"
              suffix-icon="fa fa-unlock-alt fa-lg"
              type="password"
              v-model="ruleForm.password">
            </el-input>
          </div>
          <div class="formItemBox">
              <el-button type="primary" style="width:100%" @click="onSubmit">立即登录</el-button>
          </div>
           <div class="loginRegister"><a href="#">EasyD维护团队</a></div>
        </div>
       
      </el-form>
      

      <div class="loginFootBox">EasyD维护团队为您进行技术维护，可经过授权后进行商业项目开发，官网：<a href="http://www.ed100.cn" target="_blank">http://www.ed100.cn</a></div>  
    </div>
</template>

<script>
import { mapState,mapMutations } from 'vuex'
export default {
  data(){
    return {
      ruleForm: {
        username : "",
        password : ""
      }
    }
  },
  mounted(){

    //判断是否为非法退出到登录界面
    if(this.$route.query.action){

      this.$myPop.alertBox(
        "非法操作",
        "检测到您正在进行非法解锁操作，为了保证安全，我们已将您退出系统，请您重新登录",
        function() {}
      );

    }

    //判断是否登录
    if(!this.$userData.getUserInfo()){

      //显示登录遮罩
      this['LoginModule/updateLogin'](true)

    }else{

      //消除登录遮罩
      this['LoginModule/updateLogin'](false)

    }
  },
  computed: {
     ...mapState({
        isShowLogin : state => state.LoginModule.isShowLogin
      })
  },
  methods: {
    ...mapMutations(['updateLogin', 'LoginModule/updateLogin']),
   
    onSubmit(){

      if(this.ruleForm.username.length <= 0){
        this.$myPop.WarningMessage("用户帐号不能为空");
        return;
      }

      if(this.ruleForm.password.length <= 0){
        this.$myPop.WarningMessage("用户密码不能为空");
        return;
      }

      //登录请求参数
      var params = {
        u_username : this.ruleForm.username,
        u_password : this.ruleForm.password
      }
  
      this.$myLoading.startLoading()
      this.$http.postHttp(this.$API.systemApiLogin,params,(data)=>{

        this.$myLoading.endLoading()
        
        //将权限信息存储在本地
        sessionStorage.setItem("totalMenuBar",JSON.stringify(data.menuData))
        sessionStorage.setItem("userInfo",JSON.stringify(data.userInfo))

        //消除登录遮罩
        this['LoginModule/updateLogin'](false)

        //更新菜单数据
        this.$store.commit('MenuModule/getDataTabs',this)

        //进入首页
        this.$router.push({
          path: "/home"
        });

      })
      
    }
  }
}
</script>

<style lang="stylus" scoped>

.loginRegister {
  text-align center
  color #999

  a {
    color #999

    &:hover {
      color #333
    }
  }
}

.loginFootBox {
  width 100%
  height 60px
  background-color rgba(0,0,0,0.2)
  position absolute
  color #fff
  text-align center
  font-size 12px
  line-height 60px
  bottom 0px

  a {
    text-decoration:underline
  }
}
.loginBox {
  position absolute
  left 0px
  right 0px 
  overflow  none
  top 0px 
  bottom 0px
  background #fff
  z-index 999

  .loginImgBg{
    position absolute
    left 0px
    top 0px
    width 100%
    height 100%
    object-fit: cover;
  }

  .loginTitleBox {
    width 100%
    height 80px
    font-weight bold
    color #666
    margin-bottom 20px
    text-align center
    line-height 80px
    font-size 18px
  }

  .loginContent {
    width 360px
    height 380px
    background #fff
    left 50%
    position absolute
    top 50%
    text-align center
    border-radius 5px
    margin-left -210px
    box-shadow 0 0 8px rgba(255, 255,255,0.8)
    margin-top -200px
    padding 20px

    .loginLogo {
      width 60px
      height 60px
      margin-top 10px
    }
  }

  .formItemBox {
    width 100%
    height 40px
    margin-bottom 20px
    text-align center
  }
}
</style>
